<sqx-title [message]="schema.displayName" />
<sqx-layout layout="main" titleIcon="contents" titleText="i18n:common.contents">
    <ng-container menu>
        <div class="row flex-nowrap flex-grow-1 gx-2">
            <div class="col-auto ms-8">
                <sqx-notifo position="bottom-left" topic="apps/{{ contentsState.appId }}/schemas/{{ schema.id }}/contents" />
                <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:contents.refreshTooltip" type="button">
                    <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
                </button>
            </div>

            <div class="col">
                <sqx-search-form
                    enableShortcut="true"
                    formClass="form"
                    [language]="(languagesState.isoMasterLanguage | async)!"
                    [languages]="languages"
                    placeholder="{{ 'contents.searchPlaceholder' | sqxTranslate }}"
                    [queries]="queries | async"
                    [queriesTypes]="'common.contents' | sqxTranslate"
                    [query]="contentsState.query | async"
                    (queryChange)="search($event)"
                    [queryModel]="queryModel | async" />
            </div>

            @if (languages.length > 1) {
                <div class="col-auto">
                    <sqx-language-selector
                        class="languages-buttons"
                        [language]="language"
                        (languageChange)="changeLanguage($event)"
                        [languages]="languages"
                        [percents]="translationStatus" />
                </div>
            }

            <div class="col-auto">
                <button
                    class="btn btn-success"
                    [disabled]="(contentsState.canCreateAny | async) === false"
                    routerLink="new"
                    shortcut="CTRL + U"
                    sqxTourStep="addContent"
                    title="i18n:contents.createContentTooltip"
                    type="button">
                    <i class="icon-plus"></i> {{ "contents.create" | sqxTranslate }}
                </button>
            </div>
        </div>
    </ng-container>
    <ng-container>
        @if (tableSettings | async; as tableSettings) {
            @if (tableSettings.listFields | async; as tableFields) {
                <sqx-list-view [isLoading]="contentsState.isLoading | async" syncedHeader="true" tableNoPadding="true">
                    <ng-container topHeader>
                        @if (selectionCount > 0) {
                            <div class="selection">
                                {{ "contents.selectionCount" | sqxTranslate: { count: selectionCount } }}&nbsp;&nbsp;
                                @for (status of selectionStatuses | sqxEntries; track status.key) {
                                    <button class="btn btn-outline-secondary btn-status me-2" (click)="changeSelectedStatus(status.key)" type="button">
                                        <sqx-content-status layout="text" [status]="status.key" [statusColor]="status.value" />
                                    </button>
                                }

                                @if (selectionCanDelete) {
                                    <button
                                        class="btn btn-danger"
                                        confirmRememberKey="deleteContents"
                                        confirmText="i18n:contents.deleteManyConfirmText"
                                        confirmTitle="i18n:contents.deleteConfirmTitle"
                                        (sqxConfirmClick)="deleteSelected()"
                                        type="button">
                                        {{ "common.delete" | sqxTranslate }}
                                    </button>
                                }
                            </div>
                        }

                        <div class="settings-container">
                            <button class="btn btn-sm settings-button" #buttonSettings (click)="tableViewModal.toggle()" type="button">
                                <span class="hidden">{{ "common.settings" | sqxTranslate }}</span> <i class="icon-settings"></i>
                            </button>
                            <sqx-dropdown-menu position="bottom-end" scrollY="true" [sqxAnchoredTo]="buttonSettings" *sqxModal="tableViewModal">
                                <sqx-custom-view-editor
                                    [allFields]="tableSettings.schemaFields"
                                    [listFields]="$any(tableFields)"
                                    (listFieldsChange)="tableSettings.updateFields($event)"
                                    (listFieldsReset)="tableSettings.reset()" />
                            </sqx-dropdown-menu>
                        </div>
                    </ng-container>
                    <ng-container header>
                        <table class="table table-items table-fixed" #header [fields]="tableSettings" [sqxContentListWidth]="tableFields">
                            <thead>
                                <tr>
                                    <th class="cell-select">
                                        <div class="form-check">
                                            <input
                                                class="form-check-input"
                                                id="all_selected"
                                                [ngModel]="selectedAll"
                                                (ngModelChange)="selectAll($event)"
                                                type="checkbox" />
                                            <label class="form-check-label" for="all_selected"></label>
                                        </div>
                                    </th>

                                    <th class="cell-actions cell-actions-left">
                                        <span class="truncate">{{ "common.actions" | sqxTranslate }}</span>
                                    </th>

                                    @for (field of tableFields; track field) {
                                        <th [field]="field" [fields]="tableSettings" sqxContentListCell sqxContentListCellResize>
                                            <sqx-content-list-header
                                                [field]="field"
                                                [language]="language"
                                                [query]="(contentsState.query | async)!"
                                                (queryChange)="search($event)" />
                                        </th>
                                    }

                                    <th></th>
                                </tr>
                            </thead>
                        </table>
                    </ng-container>
                    <ng-container>
                        <div class="table-container">
                            <table class="table table-center table-fixed" [fields]="tableSettings" [sqxContentListWidth]="tableFields" [sqxSyncWidth]="header">
                                @for (content of contentsState.contents | async; track content.id) {
                                    <tbody
                                        (clone)="clone(content)"
                                        [cloneable]="contentsState.snapshot.canCreate"
                                        (delete)="delete(content)"
                                        [language]="language"
                                        [languages]="languages"
                                        [link]="[content.id, 'history']"
                                        [schema]="schema"
                                        [selected]="isItemSelected(content)"
                                        (selectedChange)="selectItem(content, $event)"
                                        [sqxContent]="content"
                                        (statusChange)="changeStatus(content, $event)"
                                        [tableFields]="tableFields"
                                        [tableSettings]="tableSettings"></tbody>
                                }
                            </table>
                        </div>
                    </ng-container>
                    <ng-container footer>
                        <sqx-pager (loadTotal)="reloadTotal()" [paging]="contentsState.paging | async" (pagingChange)="contentsState.page($event)" />
                    </ng-container>
                </sqx-list-view>
            }
        }
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.filters' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="filters"
                routerLinkActive="active"
                sqxTourStep="filters"
                title="i18n:common.filters"
                titlePosition="left">
                <i class="icon-filter"></i>
            </a>
            @if (schema.properties.contentsSidebarUrl) {
                <a
                    class="panel-link"
                    attr.aria-label="{{ 'common.sidebar' | sqxTranslate }}"
                    queryParamsHandling="preserve"
                    replaceUrl="true"
                    routerLink="sidebar"
                    routerLinkActive="active"
                    sqxTourStep="plugin"
                    title="i18n:common.sidebar"
                    titlePosition="left">
                    <i class="icon-plugin"></i>
                </a>
            }
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet> <sqx-due-time-selector #dueTimeSelector [disabled]="disableScheduler" />
